<template>
  <div id="MajorLibraryDet">
    <div style="display: flex">
      <el-scrollbar>
        <div class="left-tree">
          <el-tabs
            type="border-card"
            :stretch="true"
            v-model="treeActiveName"
            @tab-click="handleTreeClick"
          >
            <el-tab-pane label="本科" name="benke">
              <el-tree
                v-loading="treeLoading"
                :data="allMajorData.majorsBK"
                empty-text="暂无数据"
                :highlight-current="true"
                node-key="code"
                :props="defaultProps"
                :default-expanded-keys="expandedKeys"
                @node-click="handleNodeClick"
              >
                <template #default="{ node, data }">
                  <span
                    class="custom-tree-node"
                    :class="{
                      treeActive: node.data.code == code,
                    }"
                  >
                    <!-- :teleported="false"
                      :offset="30" -->
                    <div
                      class="df"
                      style="justify-content: space-between; width: 100%"
                    >
                      <div @click="handleTreeLabel(node, data)">
                        {{ node.label }}
                      </div>
                      <div style="margin-right: 10px">
                        {{ node.data.childCount ? node.data.childCount : '' }}
                      </div>
                    </div>
                  </span>
                </template>
              </el-tree>
            </el-tab-pane>
            <el-tab-pane label="专科" name="zhuanke">
              <el-tree
                v-loading="treeLoading"
                :data="allMajorData.majorsZK"
                empty-text="暂无数据"
                node-key="code"
                :props="defaultProps"
                :default-expanded-keys="zhuankeExpandedKeys"
                @node-click="handleNodeClick"
              >
                <template #default="{ node, data }">
                  <span
                    class="custom-tree-node"
                    :class="{
                      treeActive: node.data.code == code.substring(0, 4),
                    }"
                  >
                    <div
                      class="df"
                      style="justify-content: space-between; width: 100%"
                    >
                      <div @click="handleTreeLabel(node, data)">
                        {{ node.label }}
                      </div>
                      <div style="margin-right: 10px">
                        {{ node.data.childCount ? node.data.childCount : '' }}
                      </div>
                    </div>
                  </span>
                </template>
              </el-tree>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-scrollbar>
      <el-scrollbar class="right-contaier">
        <div>
          <div class="like-box df">
            <div class="left">
              <h1>{{ treeName || '-' }}</h1>
              <div class="mt15 f14" style="color: #999">
                国标代码{{ code || '-' }}(不可用于填报)
              </div>
            </div>
            <div class="right" v-if="studentId">
              <div
                class="df my-btn curr"
                style="justify-content: center"
                @click="handlComparison"
              >
                <div
                  :class="{ isActive: isSelected }"
                  style="width: 100%; text-align: center"
                >
                  <!-- <i
                    class="iconfont"
                    :class="
                      isSelected
                        ? 'icon-guanzhuxiangmu-yiguanzhu'
                        : 'icon-31guanzhu1'
                    "
                    :style="isSelected ? 'color:#409eff' : ''"
                  ></i> -->
                  {{ isSelected ? '已关注' : '关注' }}
                </div>
              </div>
            </div>
          </div>

          <div class="tabs-box mt20" v-if="isShowMajorDet">
            <el-tabs
              v-model="activeName"
              class="demo-tabs"
              @tab-click="handleClick"
            >
              <el-tab-pane label="专业概述" name="majorsummarize">
                <!-- 专业介绍 -->
                <div class="item-box">
                  <!-- <div class="df">
                  <mytitlebar title="包含专业" />
                  <div class="f14" style="color: #999; margin-left: 5px">
                    ({{ majorDataLength }})
                  </div>
                </div> -->

                  <div>
                    <div
                      class="major-item"
                      v-for="item in searchMajorData.majors"
                      :key="item.code"
                    >
                      <div class="fcolor333 f16 mb10 curr">
                        <span @click="handleChangeDet(item)">{{
                          item.name
                        }}</span>
                      </div>
                      <div class="fcolor999 f14">
                        <span class="mr20">国标代码: {{ item.code }}</span>
                        <span class="mr20">学制 {{ item.learnYear }}年</span>
                        <span class="mr20">
                          男女比例 {{ item.maleRatio }}:{{ item.femaleRatio }}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="职业方向" name="second">
                <div class="df">
                  <mytitlebar title="相关专业" />
                  <!-- <div class="f14" style="color: #999; margin-left: 5px">
                  ({{ majordetailData.length }})
                </div> -->
                </div>
                <div>
                  <div
                    class="job-list-item"
                    v-for="item in majordetailData"
                    :key="item.jobCode"
                  >
                    <span
                      class="job-name f16 curr"
                      @click="handleJorChange(item)"
                      >{{ item.jobName }}</span
                    >
                    <div class="job-classify f14">{{ item.industryName }}</div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>

          <div v-if="isShowChildrenDet">
            <major-library-children-det
              :majordetailData="majordetailData"
              :majorCode="code"
              ref="majorChildrenDetRef"
            />
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup>
import bus from '@/utils/bus.js';

import { nextTick, onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { getLikeSave, getLikeList, getMajorDetail } from '@/api/appv2/appv2';
import { allMajor, searchMajor, getSearchMajorJob } from '@/api/appv2/appv1.js';
import MajorLibraryChildrenDet from '../MajorLibraryChildrenDet';
const treeLoading = ref(false);
const treeActiveName = ref('benke');
const activeName = ref('majorsummarize');
const expandedKeys = ref([]);
const zhuankeExpandedKeys = ref([]);
const isSelected = ref(false);
const studentId = ref(localStorage.getItem('student_id'));
const allMajorData = ref({});
const searchMajorData = ref([]);
const majorDataLength = ref(0);
const code = ref('');
const majorChildrenDetRef = ref(null);
const majordetailData = ref({});
const treeName = ref('');
const isShowMajorDet = ref(false);
const isShowChildrenDet = ref(false);
const majorCode = ref('');
const liskeSaveData = ref({
  type: 'major',
  targetid: '',
  operate: '',
  studentId: localStorage.getItem('student_id'),
});

const defaultProps = {
  children: 'majors',
  label: 'name',
};

const handleJorChange = (item) => {
  bus.emit('handleOpenJorDet', item);
  isShowMajorDet.value = false;
  isShowChildrenDet.value = true;
  nextTick(() => {
    majorChildrenDetRef.value.handleUpdateCollegeList(majorCode.value);
  });
};

const fetchMajorDetail = (data) => {
  getMajorDetail({ code: data.code || data.majorCode }).then((res) => {
    if (res.code == 20000) {
      majordetailData.value = res.data;
    }
  });
};
const handleTreeLabel = () => {};
const handleNodeClick = (data) => {
  let type = '';
  if (data.eduLevel == 'ben') {
    expandedKeys.value = [];
    type = 'benke';
  } else {
    zhuankeExpandedKeys.value = [];
    type = 'zhuanke';
  }
  if (data.level == '2') {
    isShowChildrenDet.value = false;
    handleTreeReq(data, type, true, '1');
  } else if (data.level == '3') {
    isShowChildrenDet.value = true;
    nextTick(() => {
      majorChildrenDetRef.value.handleUpdateCollegeList(data.code);
    });
    isShowMajorDet.value = false;
    handleTreeReq(data, type, true, '2');
  }
};
const handleChangeDet = (item) => {
  let type = '';
  if (item.eduLevel == 'ben') {
    expandedKeys.value = [];
    type = 'benke';
  } else {
    zhuankeExpandedKeys.value = [];
    type = 'zhuanke';
  }
  isShowMajorDet.value = false;
  handleTreeReq(item, type, true, '2');
};
const handleTreeReq = (data, type, isShow, showType) => {
  isShowMajorDet.value = false;
  expandedKeys.value = [];
  zhuankeExpandedKeys.value = [];
  treeActiveName.value = type;
  if (type == 'benke') {
    expandedKeys.value.push(data.code || data.majorCode);
  } else {
    zhuankeExpandedKeys.value.push(data.code || data.majorCode);
  }
  code.value = data.code || data.majorCode;
  treeName.value = data.name || data.professionRealName || data.majorName;
  if (showType == '1') {
    isShowMajorDet.value = isShow;
    fetchSearchMajor(data);
    fetchSearchMajorJob(data);
  } else {
    isShowChildrenDet.value = isShow;
    fetchMajorDetail(data);
  }
  fetchAllMajor();
};

const fetchSearchMajorJob = (data) => {
  getSearchMajorJob({ code: data.code || data.majorCode }).then((res) => {
    majordetailData.value = res.data;
  });
};
const fetchAllMajor = () => {
  allMajor().then((res) => {
    if (res.code == 20000) {
      allMajorData.value = res.data;
    }
  });
};
const fetchSearchMajor = (data) => {
  searchMajor({ code: data.code || data.majorCode }).then((res) => {
    searchMajorData.value = res.data[0];
    majorDataLength.value = searchMajorData.value.majors.length;
  });
};
const handlComparison = () => {
  isSelected.value = !isSelected.value;
  fetchLikeSave();
};

const fetchLikeSave = () => {
  liskeSaveData.value.targetid = code.value;
  isSelected.value
    ? (liskeSaveData.value.operate = 'save')
    : (liskeSaveData.value.operate = 'del');
  getLikeSave(liskeSaveData.value).then((res) => {
    if (res.code == 20000) {
      ElMessage({
        message: res.msg,
        type: 'success',
      });
    }
  });
};
const fetchLikeList = () => {
  let reqData = {
    // detail: "1",
    type: 'major',
    studentId: localStorage.getItem('student_id'),
  };
  getLikeList(reqData).then((res) => {
    let likeSchoolArr = res.data.major.split(',');
    let index = likeSchoolArr.indexOf(code.value);
    index == -1 ? (isSelected.value = false) : (isSelected.value = true);
  });
};
if (localStorage.getItem('student_id')) {
  fetchLikeList();
}
onMounted(() => {
  nextTick(() => {
    // fetchAllMajor();
  });
});
defineExpose({
  handleTreeReq,
});
</script>

<style lang="scss" scoped>
.job-list-item {
  padding: 10px 0 14px 0;
  border-bottom: 1px solid #f2f2f2;
}
.job-name {
  display: block;
  color: #333;
  margin-bottom: 13px;
  &:hover {
    color: #409eff;
  }
}
.job-classify {
  color: #666;
}
.major-item {
  padding: 15px 0 10px;
  border-bottom: 1px solid #f2f2f2;
}
.major-item span:not(:first-child):before {
  content: '';
  display: inline-block;
  width: 1px;
  height: 12px;
  background-color: #ccc;
  vertical-align: text-top;
  margin-right: 30px;
  margin-top: 4px;
}
#MajorLibraryDet {
  .el-tabs {
    // padding-bottom: 150px;
  }
  //   height: 100vh;
  //   margin-bottom: 1000px;
  .left-tree {
    width: 260px;
    margin-right: 30px;
    height: calc(100vh - 155px);
  }
  .right-contaier {
    // background: #fff7f4;
    // height: 120px;
    flex: 1;
    height: calc(100vh - 155px);
    .like-box {
      padding: 15px;
      height: 100%;
      justify-content: space-between;
      background: #f5f9ff;
    }
  }
  .my-btn {
    width: 80px;
    border-radius: 4px;
    justify-content: center;
    color: #409eff;
    border: 1px solid #409eff;

    &:hover {
      background: #409eff;
      color: #fff;
    }
  }
  .item-box {
    // margin: 40px 0;
  }
  .tabs-box {
    ::v-deep(.el-tabs__active-bar) {
      height: 0px !important;
    }
    ::v-deep(.el-tabs__nav-wrap::after) {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      background-color: #409eff;
      z-index: #409eff;
    }
    ::v-deep(.is-active) {
      background: #409eff;
      color: #fff;
      border-radius: 4px;
    }
    ::v-deep(.el-tabs__item) {
      padding: 0 30px;
    }
  }
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.treeActive {
  color: #409eff;
}
.major-item:hover {
  color: #409eff;
}
</style>
